<template>
	<view class="home-content">
		<view class="custom-navigation">
			<!-- 自定义导航内容 -->
			小春运动
		</view>
		<view class="top-box">
			<view class="top-ban" @click="goTocharge(0)">
				<!-- <image src="../../static/images/home/banner-bg.png" class="image"></image> -->
				<image src="../../static/images/home/banner-bg1.png" class="image"></image>
			</view>

			<view class="charge-list" v-if="step === 1&&rechargeList.length>0">
				<view class="charge-list-item" v-for="(item,index) in rechargeList" :key="index"
					@click="goTocharge(index)">
					<view class="new" v-if="item === 1">新人</view>
					<view class="t0">充{{item.money}}</view>
					<view class="t1">{{item.memo}}</view>
					<button class="btn">
						充值
						<image src="../../static/images/home/icon-arrow-r.png" class="image"></image>
					</button>
				</view>
			</view>
			<view class="slog-list" v-if="step === 1&&rechargeList.length>0">
				<view class="slog-list-item">
					<image src="../../static/images/home/icon-jine.png" class="img"></image>
					<text class="text">多充多送</text>
				</view>
				<view class="slog-list-item">
					<image src="../../static/images/home/icon-money.png" class="img"></image>
					<text class="text">消费抵用</text>
				</view>
				<view class="slog-list-item">
					<image src="../../static/images/home/icon-store.png" class="img"></image>
					<text class="text">全国门店均可用</text>
				</view>
			</view>
		</view>
		<view class="container" v-if="step === 1">
			<view class="wx-block">
				<view class="left">
					<image src="../../static/images/home/smcode.png" class="img"></image>
					<view class="left-info">
						<view class="t0">微信扫一扫</view>
						<view class="t1">扫码开启，开心玩乐</view>
					</view>
				</view>
				<view class="right" @click="openScanCode">
					<view class="right-btn">点击扫码</view>
					<image src="../../static/images/home/back-arrow.png" class="arrow"></image>
				</view>
			</view>
			<view class="outlets">
				<image src="../../static/images/home/outlets.png" class="image"></image>
				<view>附近网点</view>
			</view>
		</view>
		<view class="container" v-if="step === 2">
			<view class="select-box">
				<view class="title-box">
					<view class="title">选择套餐</view>
					<view class="address">
						<image src="../../static/images/home/icon-address.png" class="image"></image>
						<view class="text" @click="clickTel(deviceDetail.ground.kefu)">{{deviceDetail.ground.kefu}}
							-{{deviceDetail.ground.name}}</view>
					</view>
				</view>

				<view class="select-list">
					<view class="select-list-item" :class="selectIndex === 0 ? 'active' : ''"
						@click="setSelectIndex(0)">
						<view class="time">{{ deviceDetail.ground.rs_time }}分钟</view>
						<!-- <view class="tag">热身时间</view> -->
						<view class="item-price">{{ deviceDetail.ground.rs_price }}元</view>
					</view>
					<view class="select-list-item" :class="selectIndex === 1 ? 'active' : ''"
						@click="setSelectIndex(1)">
						<view class="hot-tag">
							<image src="../../static/images/home/icon-hot.png" class="img"></image>
							<text class="text">最火套餐</text>
						</view>
						<view class="time">{{ deviceDetail.ground.js_time }}分钟</view>
						<!-- <view class="tag">健身时间</view> -->
						<view class="item-price">{{ deviceDetail.ground.js_price }}元</view>
					</view>
					<view class="select-list-item" :class="selectIndex === 2 ? 'active' : ''"
						@click="setSelectIndex(2)">
						<view class="time">{{ deviceDetail.ground.qs_time }}分钟</view>
						<!-- <view class="tag">强身时间</view> -->
						<view class="item-price">{{ deviceDetail.ground.qs_price }}元</view>
					</view>
				</view>
			</view>
			<view class="recharge-box">
				<view class="recharge-title">
					<text style="font-weight: bold;font-size:32rpx;">多充多送</text>
					<text style="color: #999999;" v-if="userInfo">可用余额: <text
							style="color: #FF4C00;">¥{{userTotalMoney}}</text></text>
				</view>
				<view class="recharge-list">
					<view class="recharge-left">
						<image src="../../static/images/home/money_bg2.png" class="image"></image>
						<view class="recharge-info">
							<view class="label">充20元</view>
							<view class="value">得25元</view>
						</view>
					</view>
					<view class="recharge-right">
						<view class="recharge-item">
							<image src="../../static/images/home/money_bg1.png" class="image"></image>
							<view class="recharge-info">
								<view class="label">充20元</view>
								<view class="value">得25元</view>
							</view>
						</view>
						<view class="recharge-item">
							<image src="../../static/images/home/money_bg1.png" class="image"></image>
							<view class="recharge-info">
								<view class="label">充20元</view>
								<view class="value">得25元</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fill-box" style="height: 160rpx;"></view>
		</view>
		<view class="button-group-box" v-if="step === 2">
			<view class="button-group">
				<view class="button-left">
					<image src="../../static/images/home/button1.png" class="image"></image>
					<view class="coupon">{{freeCouponList.length}}张券可用</view>
				</view>
				<view class="button-right">
					<view class="button2">
						<image src="../../static/images/home/button2.png" class="image"></image>
						<view class="money">¥{{payMoney}}</view>
					</view>
					<view class="button3" @click="settlement">去结算</view>
				</view>

			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#ffffff">
			<view class="popup-box">
				<view class="pay-title">
					<view class="left"></view>
					<view class="center"></view>
					<view class="right"></view>
				</view>
				<view class="paylist">
					<view class="paylist-item" v-for="(item, i) in paylist" :key="i" @click="paytype=item.type">
						<view class="paylist-item-left">
							<image :src="item.imgSrc" class="img"></image>
							<text class="text"> {{ item.name }}</text>
						</view>
						<view class="paylist-item-right">
							<view v-if="item.type=='free_coupon'">{{freeCouponList.length}}张</view>
							<view v-if="item.type=='money'">余额{{userTotalMoney}}元</view>
							<view class="checked btn" v-if="paytype === item.type">
								<image src="../../static/images/home/checked.png" class="image"></image>
							</view>
							<view class="unchecked btn" v-else>
								<image src="../../static/images/home/unchecked.png" class="image"></image>
							</view>
						</view>

					</view>
				</view>
				<view class="btn-box">
					<view class="button-group">
						<view class="btn" @click="limitUse">去支付</view>
						<view class="btn2" @click="cancelPay">取消</view>
					</view>
					<view class="agree-text">
						<image class="img" src="../../static/images/home/checked.png" v-if="isAgree"
							@click="this.isAgree = false">
						</image>
						<image class="img" src="../../static/images/home/unchecked.png" v-if="!isAgree"
							@click="this.isAgree = true">
						</image>
						<view class="agree-tit">
							我已阅读并同意
							<text @click="this.isshowAgree = true" class="text">《服务协议》</text>
						</view>
					</view>
				</view>
			</view>

		</uni-popup>
		<!-- <view class="kefu-img" @click="clickTel"><text class="text">联系客服</text></view> -->
		<view class="device-Using" v-if="isshowUsing">
			<view class="using-box">
				<view class="t0">温馨提示</view>
				<view class="t1">
					其他用户正在使用
					<br />
					您可以使用其他设备哦～
				</view>
				<!--此方法只需要在wxml里添加下面代码即可，无需用 bindtap关联函数-->
				<navigator target="miniProgram" open-type="exit">
					<button plain="true" class="btn">退出小程序</button>
				</navigator>
			</view>
			<view class="close" @click="this.isshowUsing = false">
				<image src="../../static/images/home/close-white.png" class="image"></image>
			</view>
		</view>
		<view class="agree-dialog" v-if="isshowAgree">
			<view class="agree-box">
				<view class="t0">
					服务协议
					<view class="close" @click="this.isshowAgree = false">
						<image src="../../static/images/home/close.png" class="image"></image>
					</view>
				</view>
				<view class="t1">
					为避免健身过程中发生意外和纠纷，请在使用本公司健身设备前仔细阅读本"用户服务声明"，并正确使用。
					<br />
					1、本健身设备为付费体验服务，未付费用户请勿隨意摆弄。如果发现设备损坏，请停止使用。
					<br />
					2、严禁在健身设备上进行危动作，不满12周岁的儿童必须有监护人在旁边才能使用健身设备。
					<br />
					3、患有急性疾病、孕妇和酒醉人员不适合在本设备上进行健身运动。
					<br />
					4、智障或未成年人使用时必须由正常人监护再使用。
					<br />
					5、请根据自己的身体状况安排适度的健身时间和运动强度。
					<br />
					6、在使用过程中，请照看好随身携带的物品防止丢失。
					<br />
					7、最终解释权归深圳市小春云科技有限公司所有。
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js';
	export default {
		data() {
			return {
				step: 1,
				isshowUsing: false,
				isAgree: true,
				isshowAgree: false,
				rechargeList: [],
				freeCouponList: [],
				selectIndex: 1,
				date: null,
				device_id: null,
				active_type: null,
				deviceDetail: null,
				paytype: 'wechat',
				orderid: null,
				userInfo: {
					money: "0.00",
					gifts_money: "0.00"
				},
				paylist: [{
						imgSrc: '../../static/images/home/wechat.png',
						name: '微信支付',
						type: 'wechat'
					},
					{
						imgSrc: '../../static/images/home/pay-icon.png',
						name: '余额支付',
						type: 'money'
					},
				]
			};
		},
		onLoad(options) {
			console.log(options)
			if (options && options.q) {
				console.log(decodeURIComponent(options.q))
				this.device_id = this.getQueryParam(decodeURIComponent(options.q), 'sn')
				this.active_type = this.getQueryParam(decodeURIComponent(options.q), 'type')
			}
			if (options && options.type) {
				this.active_type = options.type
				this.date = options.date
			}
			let token = uni.getStorageSync("token")
			if (!token) {
				this.wxAuthorize()
			} else {
				this.getUserInfo()
				this.getRechargeConfig();
			}
		},
		computed: {
			userTotalMoney() {
				let toatlMoney = Number(this.userInfo.money) + Number(this.userInfo.gifts_money)
				return toatlMoney.toFixed(2)
			},
			payMoney() {
				let amount = '0.00'
				if (this.selectIndex == 0) {
					amount = this.deviceDetail.ground.rs_price
				}
				if (this.selectIndex == 1) {
					amount = this.deviceDetail.ground.js_price
				}
				if (this.selectIndex == 2) {
					amount = this.deviceDetail.ground.qs_price
				}
				return amount
			},
		},
		onShow() {
			let token = uni.getStorageSync("token")
			if (token) {
				this.getFreeCouponList()
			}
			if (this.active_type) {
				this.setSelectIndex(0)
			} else {
				this.setSelectIndex(1)
			}
		},
		methods: {
			cancelPay(){
				this.$refs.popup.close()
				this.step =1
			},
			settlement(){
				this.$refs.popup.open('bottom')
			},
			wxAuthorize() {
				let that = this
				uni.showLoading({
					mask: true,
					title: "登录中,请稍后"
				})
				uni.login({
					provider: 'weixin',
					success: login => {
						api.otherLogin({
							code: login.code
						}).then(wx => {
							uni.getUserInfo({
								provider: "weixin",
								success: info => {
									api.getWxUserInfo({
										openid: wx.data.openid,
										sessionKey: wx.data.session_key,
										encryptedData: info.encryptedData,
										iv: info.iv
									}).then(wxUser => {
										that.showToast("登录成功")
										uni.hideLoading()
										that.$store.commit('saveToken', wxUser.data
											.token)
										that.getUserInfo()
										that.getRechargeConfig();
									}).catch(error => {
										that.showToast("登录失败")
										uni.hideLoading()
									})
								}
							})
						})
					},
					fail() {
						that.showToast("登录失败")
						uni.hideLoading()
					}
				})
			},
			getUserInfo() {
				api.getUserInfo().then(res => {
					if (res.code == 401) {
						uni.removeStorageSync('token')
						this.wxAuthorize()
					} else {
						this.userInfo = res.data.userinfo
						this.$store.commit('saveUserInfo', res.data.userinfo)
						this.getFreeCouponList()
						if (this.device_id) {
							this.getDeviceInfo()
						}
						if (this.active_type == 'active' && res.data.userinfo.free_acive_type == 0) {
							uni.navigateTo({
								url: '/pages/active/newActive'
							})
						}
						if (this.active_type == 'active' && res.data.userinfo.free_acive_type == 1) {
							uni.navigateTo({
								url: '/pages/active/joinGroup'
							})
						}
						if (this.active_type == 'group') {
							uni.navigateTo({
								url: '/pages/active/groupActive'
							})
						}
						if (this.active_type == 'seckill' && this.date) {
							uni.navigateTo({
								url: '/pages/active/limitActive?date=' + this.date
							})
						}

					}
				})
			},
			getFreeCouponList() {
				api.getFreeCouponList({
					status: 'created',
				}).then(res => {
					this.freeCouponList = res.data
				})
			},
			getQueryParam(url, param) {
				const queryString = url.split('?')[1];
				if (!queryString) return null;
				const params = queryString.split('&');
				for (let i = 0; i < params.length; i++) {
					const [key, value] = params[i].split('=');
					if (decodeURIComponent(key) === param) {
						return decodeURIComponent(value);
					}
				}
				return null;
			},
			// 扫码授权
			openScanCode() {
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: 'qrCode',
					success: res => {
						that.device_id = that.getQueryParam(res.result, 'sn')
						that.getDeviceInfo()
					},
					fail: () => {
						that.showToast('用户取消扫码')
					}
				})
			},
			getDeviceInfo() {
				// 获取设备码
				api.getDeviceInfo({
					id: this.device_id
				}).then(res => {
					if (!res.data) {
						this.showToast('未查询到该设备请联系客服')
					} else {
						if (res.data.type != 'online') {
							return this.showToast('设备已下线')
						}
						if (res.data.status == 'hidden') {
							return this.showToast('设备已禁用')
						}
						// if(){
						// 	this.isshowUsing = true;
						// }
						this.step = 2
						this.deviceDetail = res.data
					}
				})
			},
			showToast(title) {
				uni.showToast({
					icon: "none",
					title: title
				})
			},
			setSelectIndex(index) {
				this.paytype = 'wechat'
				this.selectIndex = index
				const commonPaylist = [{
						imgSrc: '../../static/images/home/wechat.png',
						name: '微信支付',
						type: 'wechat'
					},
					{
						imgSrc: '../../static/images/home/pay-icon.png',
						name: '余额支付',
						type: 'money'
					}
				];
				if (this.selectIndex === 0) {
					this.paylist = [...commonPaylist, {
						imgSrc: '../../static/images/home/free-order.png',
						name: '免单支付',
						type: 'free_coupon'
					}];
				} else {
					this.paylist = [...commonPaylist];
				}
			},
			limitUse() {
				let that = this
				if (!this.isAgree) {
					return this.showToast('请同意服务协议')
				}
				let type, yd_time, amount;
				if (this.selectIndex == 0) {
					type = 'rs'
					yd_time = this.deviceDetail.ground.rs_time
					amount = this.deviceDetail.ground.rs_price
				}
				if (this.selectIndex == 1) {
					type = 'js'
					yd_time = this.deviceDetail.ground.js_time
					amount = this.deviceDetail.ground.js_price
				}
				if (this.selectIndex == 2) {
					type = 'qs'
					yd_time = this.deviceDetail.ground.qs_time
					amount = this.deviceDetail.ground.qs_price
				}
				let data = {
					type: type,
					yd_time: yd_time,
					amount: amount,
					ground_id: this.deviceDetail.ground_id,
					device_id: this.deviceDetail.id,
					paytype: this.paytype,
				}
				//提交订单
				api.submitOrder({
					type: type,
					yd_time: yd_time,
					amount: amount,
					ground_id: this.deviceDetail.ground_id,
					device_id: this.deviceDetail.id,
					paytype: this.paytype,
				}).then(res => {
					this.getFreeCouponList()
					if (that.paytype == 'wechat') {
						that.orderid = res.data.order.orderid
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success: function(res) {
								uni.redirectTo({
									url: '/pages/pay/paySuccess?order_id=' + that.orderid
								})
							},
							fail: function(err) {
								that.showToast("用户取消支付")
							}
						});
					} else {
						this.orderid = res.data.orderid
						uni.redirectTo({
							url: '/pages/pay/paySuccess?order_id=' + this.orderid
						})
					}
				});
			},
			goTocharge(index) {
				uni.navigateTo({
					url: '/pages/user/recharge?index=' + index // 跳转到对应路径的页面
				});
			},
			getRechargeConfig() {
				api.rechargeConfig().then(res => {
					this.rechargeList = res.data;
				});
			},
			// 服务协议
			getServicePro() {
				api.sysConfig({
					site: 'service_protocol'
				}).then(res => {
					console.log(res);
				})
			},
			clickTel(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
				// api.sysConfig({
				// 	site: 'sys_kefu'
				// }).then(res => {


				// })
			},

			loginOut() {
				uni.navigateBack({
					delta: 1 // 默认值是1，表示返回的页面层数
				});
			}
		}
	};
</script>

<style lang="scss">
	.home-content {
		padding: 88rpx 0rpx 20rpx;
		background: url('https://oss.bigchun.com/img/home/header-bg.png') no-repeat;
		background-size: 100% 328rpx;

		.custom-navigation {
			text-align: center;
			line-height: 88rpx;
			text-align: center;
			font-size: 34rpx;
			color: #ffffff;
		}

		.popup-box {
			position: relative;
			background-color: #ffffff;
			.pay-title{
				padding: ;
				font-size: 32rpx;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.center{
					
				}
			}
			.paylist {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin: 20rpx 0;

				.paylist-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 20rpx 0;

					.paylist-item-right {
						display: flex;
						align-items: center;
						color: #999999;
						font-size: 24rpx;

						.btn {
							margin-left: 20rpx;
						}
					}

					.paylist-item-left {
						display: flex;
						align-items: center;

						.img {
							width: 52rpx;
							height: 52rpx;
							margin-right: 16rpx;
						}

						.text {
							font-weight: 400;
							font-size: 28rpx;
							color: #000000;
							line-height: 40rpx;
							text-align: left;
						}
					}

					.btn {
						.image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}

			.btn-box {
				.button-group {
					margin: 0 20rpx;
					display: flex;
					justify-content: space-between;

					.btn {
						flex: 3;
						height: 88rpx;
						background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
						box-shadow: 0px 4rpx 12rpx 0px rgba(20, 135, 255, 0.4);
						border-radius: 44rpx;
						font-size: 34rpx;
						color: #ffffff;
						line-height: 88rpx;
						text-align: center;
						margin-right: 20rpx;
					}

					.btn2 {
						flex: 1;
						height: 88rpx;
						border: 1rpx solid #E6E5E5;
						border-radius: 44rpx;
						font-size: 34rpx;
						line-height: 88rpx;
						text-align: center;
					}
				}


				.agree-text {
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 30rpx auto;

					.img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					.agree-tit {
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
						text-align: right;

						.text {
							color: #49a1fd;
						}
					}
				}
			}

		}

		.button-group-box {
			position: fixed;
			bottom: 0;
			z-index: 50;
			width: 100%;
			height: 142rpx;
			display: flex;
			align-items: center;
			background-color: #ffffff;

			.button-group {
				padding: 0 30rpx;
				width: 100%;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.button-left {
					position: relative;
					height: 102rpx;
					flex: 1;

					.image {
						width: 100%;
						height: 102rpx;
						position: absolute;
						top: 0;
					}

					.coupon {
						position: absolute;
						z-index: 51;
						text-align: center;
						font-size: 28rpx;
						color: #FFFFFF;
						bottom: 4rpx;
						margin-left: 20rpx;
					}
				}

				.button-right {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					align-self: flex-end;

					.button2 {
						position: relative;
						width: 254rpx;
						height: 84rpx;
						line-height: 84rpx;
						font-size: 32rpx;
						color: #FFFFFF;

						.image {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
						}

						.money {
							position: absolute;
							z-index: 51;
							margin-left: 96rpx;
						}
					}

					.button3 {
						font-size: 32rpx;
						color: #FFFFFF;
						position: relative;
						width: 262rpx;
						height: 84rpx;
						text-align: center;
						line-height: 84rpx;
						background-color: #379bfd;
						border-radius: 0 42rpx 42rpx 0;
					}
				}

			}
		}

		.top-box {
			padding: 26rpx;
			margin: 32rpx 30rpx 0;
			background: #ffffff;
			box-shadow: 0px 0px 12rpx 0px rgba(102, 226, 244, 0.19);
			border-radius: 20rpx;

			.top-ban {
				.image {
					width: 100%;
					height: 148rpx;
				}
			}

			.charge-list {
				display: flex;
				margin-top: 16rpx;

				.charge-list-item {
					flex: 1;
					margin-right: 24rpx;
					background: #49a1fd;
					border-radius: 20rpx;
					text-align: center;
					padding: 26rpx 0;
					position: relative;

					&:last-child {
						margin-right: 0;
					}

					.new {
						background: url('https://oss.bigchun.com/img/home/new-bg.png') no-repeat;
						background-size: 110rpx 40rpx;
						position: absolute;
						right: 0;
						top: -5px;
						font-weight: 400;
						font-size: 24rpx;
						color: #ffffff;
						line-height: 34rpx;
						width: 110rpx;
						height: 40rpx;
					}

					.t0 {
						font-weight: 400;
						font-size: 30rpx;
						color: #ffffff;
						line-height: 42rpx;
					}

					.t1 {
						font-size: 40rpx;
						color: #ffffff;
						line-height: 56rpx;
						margin-bottom: 4rpx;
					}

					.btn {
						background: #ffffff;
						border-radius: 24rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #49a1fd;
						line-height: 40rpx;
						display: inline-flex;
						align-items: center;
						justify-content: center;

						.image {
							width: 12rpx;
							height: 22rpx;
							margin-left: 10rpx;
						}
					}
				}
			}

			.slog-list {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;

				.slog-list-item {
					display: flex;
					align-items: center;

					.img {
						width: 38rpx;
						height: 38rpx;
						margin-right: 4rpx;
					}

					.text {
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
						text-align: left;
					}
				}
			}
		}

		.container {
			margin: 0 30rpx;

			.wx-block {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.img {
						width: 60rpx;
						height: 60rpx;
					}

					.left-info {
						margin-left: 10rpx;

						.t0 {
							font-size: 32rpx;
							color: #000000;
							line-height: 44rpx;
						}

						.t1 {
							font-weight: 400;
							font-size: 24rpx;
							color: #bdbdbd;
							line-height: 34rpx;
						}
					}
				}

				.right {
					width: 248rpx;
					height: 88rpx;
					background: linear-gradient(311deg, #93A4FB 0%, #2F9AFE 100%);
					box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
					border-radius: 44rpx;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;

					.arrow {
						width: 14rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}

				}
			}

			.outlets {
				display: flex;
				align-items: center;
				border-radius: 20rpx;
				padding: 26rpx 20rpx;
				margin-top: 20rpx;
				font-size: 28rpx;
				background-color: #ffffff;

				.image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.recharge-box {
				padding: 10rpx;
				background: #FFF3DD;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.recharge-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 10rpx;
				}

				.recharge-list {
					display: flex;
					justify-content: space-between;

					.recharge-info {
						position: relative;
						z-index: 10;
						width: 100%;
						height: 100%;
						text-align: center;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.label {
							font-size: 28rpx;
							color: #666666;
						}

						.value {
							font-size: 32rpx;
							color: #333333;
						}
					}

					.recharge-left {
						position: relative;
						width: 312rpx;
						height: 321rpx;
						background: #F9F9F9;
						border-radius: 12rpx 12rpx 12rpx 12rpx;

						.image {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
						}
					}

					.recharge-right {
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						.recharge-item {
							position: relative;
							width: 322rpx;
							height: 157rpx;
							background: #F9F9F9;
							border-radius: 12rpx 12rpx 12rpx 12rpx;

							.image {
								width: 100%;
								height: 100%;
								position: absolute;
								top: 0;
							}
						}
					}
				}
			}

			.select-box {
				background: #ffffff;
				border-radius: 20rpx;
				padding: 20rpx;
				margin: 20rpx 0;

				.title-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 30rpx;
						color: #000000;
						line-height: 42rpx;
						text-align: left;
						position: relative;
						padding-left: 20rpx;

						&::before {
							position: absolute;
							content: '';
							width: 10rpx;
							height: 30rpx;
							background: #49a1fd;
							border-radius: 6rpx;
							left: 0;
							top: 6rpx;
						}
					}

					.address {
						display: flex;
						align-items: center;

						.image {
							width: 22rpx;
							height: 28rpx;
						}

						.text {
							font-weight: 400;
							font-size: 28rpx;
							color: #737373;
							line-height: 40rpx;
							text-align: center;
							margin-left: 4rpx;
						}
					}
				}

				.select-list {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;

					.select-list-item {
						width: 31%;
						box-sizing: border-box;
						background: #f7f7f7;
						border-radius: 28rpx;
						padding: 30rpx 20rpx;
						position: relative;
						text-align: center;

						.time {
							font-size: 34rpx;
							margin-top: 20rpx;
						}

						&.active {
							background: #f8fcff;
							box-shadow: 0px 0px 8rpx 0px rgba(102, 226, 244, 0.19);
							border-radius: 16rpx;
							border: 2rpx solid #49a1fd;

							.time {
								font-size: 38rpx;
								font-weight: bold;
								color: #49a1fd !important;
							}

							.tag {
								color: #49a1fd !important;
							}
						}

						.hot-tag {
							position: absolute;
							top: 0;
							left: 0;
							background: #49a1fd;
							border-radius: 16rpx 0px 22rpx 0px;
							width: 148rpx;
							height: 34rpx;
							display: flex;
							align-items: center;

							.img {
								width: 26rpx;
								height: 26rpx;
							}

							.text {
								font-weight: 400;
								font-size: 24rpx;
								color: #ffffff;
								line-height: 34rpx;
								text-align: left;
							}
						}

						.item-price {
							font-weight: 400;
							font-size: 28rpx;
							margin-top: 20rpx;
							color: #fb2525;
							line-height: 40rpx;
							text-align: center;
						}
					}
				}
			}

		}

		.kefu-img {
			background: url('https://oss.bigchun.com/img/home/kefu-bg.png') no-repeat;
			background-size: 124rpx 124rpx;
			position: fixed;
			bottom: 20%;
			right: 12rpx;
			width: 124rpx;
			height: 124rpx;

			.text {
				font-weight: 400;
				font-size: 20rpx;
				color: #49a1fd;
				line-height: 28rpx;
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
			}
		}

		.device-Using {
			background: rgba(0, 0, 0, 0.6);
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;

			.using-box {
				background: url('https://oss.bigchun.com/img/home/tank-bg.png') no-repeat;
				background-size: 100% 100%;
				height: 430rpx;
				margin: 60% 84rpx 3%;
				text-align: center;

				.t0 {
					font-size: 34rpx;
					color: #ffffff;
					line-height: 48rpx;
					padding-top: 10rpx;
				}

				.t1 {
					font-weight: 400;
					font-size: 30rpx;
					color: #444444;
					line-height: 50rpx;
					margin: 60rpx 0 50rpx;
				}

				.btn {
					background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
					box-shadow: 0px 4rpx 12rpx 0px rgba(20, 135, 255, 0.4);
					border-radius: 44rpx;
					font-size: 34rpx;
					color: #ffffff;
					width: 300rpx;
					line-height: 88rpx;
					margin: 0 auto;
				}
			}

			.close {
				margin: 0 auto;
				text-align: center;
				cursor: pointer;
				padding: 20rpx;

				.image {
					width: 68rpx;
					height: 68rpx;
				}
			}
		}

		.agree-dialog {
			background: rgba(0, 0, 0, 0.6);
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;

			.agree-box {
				background: url('https://oss.bigchun.com/img/home/agree-bg.png') no-repeat;
				background-size: 100% 100%;
				padding: 40rpx 30rpx;
				margin: 30% 40rpx;

				.t0 {
					font-size: 34rpx;
					color: #000000;
					line-height: 48rpx;
					text-align: center;
					position: relative;

					.close {
						position: absolute;
						right: 0;
						top: 0;
						cursor: pointer;

						.image {
							width: 26rpx;
							height: 26rpx;
						}
					}
				}
			}

			.t1 {
				font-weight: 400;
				font-size: 28rpx;
				color: #444444;
				line-height: 50rpx;
				text-align: left;
			}
		}
	}
</style>